//-----------柱状图----------------------------------------------
//数据
var barAllData = JSON.parse($('._bar').val());
//console.log(barAllData)
var myBar = echarts.init(document.getElementById('bar'));
var barOption = {
	color: ['#5bc0de', '#5cb85c', '#f0ad4e'],
	title: {
		text: '全国各城市酒店评分分布',
		x: 'center',
		y: 'top',
		textStyle: {
			fontSize: 12
		}
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: { // 坐标轴指示器，坐标轴触发有效
			type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
		}
	},
	//TODO 修改图例
	legend: {
		data: ["3分以下", "3-4分", "4-5分"],
		y: 'bottom'
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '7%',
		containLabel: true
	},
	//TODO 修改总坐标
	yAxis: [{
		type: 'category',
		data: barAllData.category,
		inverse: true
	}],
	xAxis: [{
		type: 'value',
	}],
	//TODO 修改数据
	series: barAllData.series
};
//console.log(barOption)
myBar.setOption(barOption)
	//-----------饼状图----------------------------------------------
var pieData = JSON.parse($('._pie').val());
var myPie = echarts.init(document.getElementById('pie'));
var pieOption = {
	color: ['#5bc0de', '#5cb85c', '#f0ad4e', '#d9534f', '#F18D05'],
	title: {
		text: '全国酒店价格占比',
		x: 'center',
		y: 'top',
		textStyle: {
			fontSize: 12
		}
	},
	tooltip: {
		trigger: 'item',
		formatter: "{a} <br/>{b} : {d}%"
	},
	legend: {
		data: ['100以下', '500以上', '100-200', '200-300', '300-400'],
		y: 'bottom'
	},
	series: [{
		name: '所占百分比',
		type: 'pie',
		radius: '55%',
		center: ['50%', '60%'],
		data: pieData,
		itemStyle: {
			emphasis: {
				shadowBlur: 10,
				shadowOffsetX: 0,
				shadowColor: 'rgba(0, 0, 0, 0.5)'
			}
		}
	}]
};
myPie.setOption(pieOption);
//-----------散点图----------------------------------------------
var mapAllData = JSON.parse($('._map').val());
//console.log(mapAllData)
var myMap = echarts.init(document.getElementById('dotMap'));
var mapData = mapAllData;
var mapOption = {
	backgroundColor: '#ffffff',
	title: {
		text: '全国高端酒店价格热力分布',
		x: 'center',
		y: 'top',
		textStyle: {
			fontSize: 12
		}
	},
	tooltip: {
		padding: 10,
		backgroundColor: '#222',
		borderColor: '#777',
		borderWidth: 1,
		//TODO 渲染格式
		formatter: function(obj) {
			var value = obj.value;
			return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">酒店名称：' + value[3] + '</div>' +
				'城市名称：' + value[4] + '<br/>' +
				'价格：' + value[2] + '.00元<br/>' +
				'评分：' + value[5] + '分<br/>' + '<img width="200" src="' + value[6] + '">'
		}
	},
	geo: {
		map: 'china',
		label: {
			emphasis: {
				show: true
			}
		},
		roam: true,
		itemStyle: {
			normal: {
				areaColor: '#323c48',
				borderColor: '#111'
			},
			emphasis: {
				areaColor: '#2a333d'
			}
		}
	},
	series: {
		name: '全国房价',
		type: 'scatter',
		coordinateSystem: 'geo',
		data: mapData,
		symbolSize: function(val) {
			return val[2] / 100;
		},
		label: {
			normal: {
				formatter: '{b}',
				position: 'right',
				show: false
			},
			emphasis: {
				show: true
			}
		},
		itemStyle: {
			normal: {
				color: '#ddb926'
			}
		}
	}
}
myMap.setOption(mapOption);
//-----------页面js-----------------------------------------------
$(document)
	.on('click', '#downCanvas', function() {		
		$('._list').removeClass('hide');
		$(this).addClass('hide');					
		$('#downCanvastt').removeClass('hide');
	})
	.on('click','#downCanvastt',function(){
		$('._list').addClass('hide');
		$(this).addClass('hide');
		$('#downCanvas').removeClass('hide');
	})
	.on('scroll', function() {
		var scrollVal = document.documentElement.scrollTop || document.body.scrollTop || 0;
		if(scrollVal <= 1975) {
			if(!$('#ttt a:eq(0)').hasClass('hr')) {
				$('#ttt a').removeClass('hr');
				$('#ttt a:eq(0)').addClass('hr');
			}
		} else if(scrollVal <= 3123) {
			if(!$('#ttt a:eq(1)').hasClass('hr')) {
				$('#ttt a').removeClass('hr');
				$('#ttt a:eq(1)').addClass('hr');
			}
		} else {
			if(!$('#ttt a:eq(2)').hasClass('hr')) {
				$('#ttt a').removeClass('hr');
				$('#ttt a:eq(2)').addClass('hr');
			}
		}
		if(scrollVal >= 410) {
			$('#ttt').css({
				position: 'fixed',
				top: 60,
				zIndex: 999,
				left: 0,
				right: 0,
				width: '100%'
			});
		} else {
			$('#ttt').css({
				position: 'relative',
				top: 0
			});
		}
	})

 function drawDown(id) {
				var c = document.getElementById(id),
					cxt = c.getContext("2d");
				cxt.beginPath();
				cxt.moveTo(5, 20);
				cxt.lineTo(25, 40);
				cxt.lineTo(45, 20);
				cxt.lineWidth = 5;
				cxt.strokeStyle = "gray";
				cxt.lineCap = 'round';
				cxt.lineJoin = "round";
				cxt.stroke();
				cxt.moveTo(5, 5);
				cxt.lineTo(25, 25);
				cxt.lineTo(45, 5);
				cxt.lineWidth = 5;
				cxt.strokeStyle = "gray";
				cxt.lineCap = 'round';
				cxt.lineJoin = "round";
				cxt.stroke();
			}
			drawDown("downCanvas");

        function drawDown1(id) {
				var c = document.getElementById(id),
					cxt = c.getContext("2d");
				cxt.beginPath();
				cxt.moveTo(5, 45);
				cxt.lineTo(25, 25);
				cxt.lineTo(45, 45);
				cxt.lineWidth = 5;
				cxt.strokeStyle = "gray";
				cxt.lineCap = 'round';
				cxt.lineJoin = "round";
				cxt.stroke();
				cxt.moveTo(5, 30);
				cxt.lineTo(25, 10);
				cxt.lineTo(45, 30);
				cxt.lineWidth = 5;
				cxt.strokeStyle = "gray";
				cxt.lineCap = 'round';
				cxt.lineJoin = "round";
				cxt.stroke();
			}
			drawDown1('downCanvastt');